<template>
  <view class="venue-detail">
    <!-- 场地图片轮播 -->
    <swiper
      class="venue-swiper"
      :indicator-dots="true"
      :autoplay="true"
      interval="3000"
      circular
    >
      <swiper-item v-for="(item, index) in venueDetail.images" :key="index">
        <image :src="item" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 场地基本信息 -->
    <view class="venue-info">
      <view class="venue-title">{{ venueDetail.name }}</view>
      <view class="venue-price">¥{{ venueDetail.price }}起</view>
      <view class="venue-tags">
        <text
          v-for="(tag, index) in venueDetail.tags"
          :key="index"
          class="tag"
          >{{ tag }}</text
        >
      </view>
      <view class="venue-address" @tap="openLocation">
        <text class="icon">📍</text>
        <text>{{ venueDetail.address }}</text>
        <text class="navigate-text">导航</text>
      </view>
    </view>

    <!-- 场地详细介绍 -->
    <view class="venue-desc">
      <view class="section-title">场地介绍</view>
      <view class="desc-content">{{ venueDetail.description }}</view>
    </view>

    <!-- 服务包含 -->
    <view class="venue-services">
      <view class="section-title">服务包含</view>
      <view class="service-list">
        <view
          class="service-item"
          v-for="(service, index) in venueDetail.services"
          :key="index"
        >
          <text class="icon">✓</text>
          <text>{{ service }}</text>
        </view>
      </view>
    </view>

    <!-- 底部预订栏 -->
    <view class="bottom-bar">
      <view class="contact-btn" @tap="contactService">
        <text class="icon">💬</text>
        <text>联系客服</text>
      </view>
      <view class="book-btn" @tap="goToBooking">立即预订</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const venueDetail = ref({
  name: '玫瑰庄园',
  price: 19999,
  images: [
    'https://img.freepik.com/free-photo/wedding-ceremony-garden_1303-11466.jpg',
    'https://img.freepik.com/free-photo/wedding-setup-beach_1232-3079.jpg',
    'https://img.freepik.com/free-photo/wedding-ceremony-night_1303-11521.jpg',
  ],
  tags: ['草坪婚礼', '提供住宿', '可容纳300人'],
  address: '杭州市西湖区玫瑰园路88号',
  description:
    '玫瑰庄园坐落于西湖畔，环境优美，是举办婚礼的绝佳场所。场地内部设施齐全，提供一站式婚礼服务。',
  services: [
    '场地布置',
    '专业策划团队',
    '婚礼司仪',
    '摄影摄像',
    '新娘化妆',
    '自助餐饮',
  ],
  latitude: 30.259924,
  longitude: 120.130742,
});

// 联系客服
const contactService = () => {
  uni.makePhoneCall({
    phoneNumber: '400-888-8888',
  });
};

// 跳转到预订页面
const goToBooking = () => {
  uni.navigateTo({
    url: `/pages/booking/booking?venueId=${venueDetail.value.id}`,
  });
};

// 打开地图导航
const openLocation = () => {
  uni.openLocation({
    latitude: venueDetail.value.latitude,
    longitude: venueDetail.value.longitude,
    name: venueDetail.value.name,
    address: venueDetail.value.address,
    success: () => {
      console.log('打开地图成功');
    },
    fail: (err) => {
      console.error('打开地图失败：', err);
      uni.showToast({
        title: '打开地图失败',
        icon: 'none',
      });
    },
  });
};
</script>

<style scoped>
.venue-detail {
  padding-bottom: 100rpx;
}

.venue-swiper {
  height: 500rpx;
}

.venue-swiper image {
  width: 100%;
  height: 100%;
}

.venue-info {
  background-color: #fff;
  padding: 30rpx;
}

.venue-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.venue-price {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.venue-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}

.tag {
  background-color: #f5f5f5;
  padding: 8rpx 20rpx;
  margin-right: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.venue-address {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 28rpx;
  padding: 10rpx 0;
}

.venue-desc,
.venue-services {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.desc-content {
  color: #666;
  line-height: 1.6;
  font-size: 28rpx;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.service-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.service-item .icon {
  color: #52c41a;
  margin-right: 10rpx;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  font-size: 28rpx;
  color: #666;
}

.book-btn {
  flex: 1;
  margin-left: 20rpx;
  background-color: #ff4d4f;
  color: #fff;
  text-align: center;
  padding: 20rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.navigate-text {
  margin-left: auto;
  color: #ff4d4f;
  font-size: 26rpx;
  padding: 4rpx 16rpx;
  border: 1rpx solid #ff4d4f;
  border-radius: 20rpx;
}

.venue-address {
  cursor: pointer;
  transition: opacity 0.2s;
}

.venue-address:active {
  opacity: 0.7;
}
</style>
